<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 在网页中引入axios的js文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>
<body>
    <h1>Ajax版的上传图书添加测试</h1>
    <form action="/books/" method="post" enctype="multipart/form-data">
        书名：<input type="text" name="name"/><br/><br/>
        作者：<input type="text" name="author"/><br/><br/>
        图片：<input type="file" name="img"/><br/><br/>
        价格：<input type="text" name="price"/><br/><br/>
        版社：<input type="text" name="cbs"/><br/><br/>
        描述：<input type="text" name="intro"/><br/><br/>
        
    </form>
    <input type="submit" id="sid" value="添加"/>

    <script>
        const form = document.querySelector("form");
        const sid = document.querySelector("#sid");
        sid.onclick = async function(){
            // 获取表单项内容，并拼接后添加到data数组中
            const forms = new FormData;
            forms.append("name", form.name.value);
            forms.append("author", form.author.value);
            forms.append("img", form.img.files[0]);
            forms.append("price", form.price.value);
            forms.append("cbs", form.cbs.value);
            forms.append("intro", form.intro.value);
            
           // let formData = new FormData(document.adminForm)

            let { code, msg } = await axios.post("/books/",forms);
            return false; // 阻止表单提交
        }
    </script>
</body>
</html>